<template>
  <div style="height: 100%;" class="rexLeft">
    <div class="intro btbox btboxbg flexb fontz">
      <span>{{ $t('rex.rexIntroduction') }}</span>
      <i class="iconfont el-icon-close" @click="handleHideRexDetail"></i>
    </div>
    <div class="overflowbox scrollbar">
      <div class="jianjie">
        <p>{{ $t('rex.rexIntroductionCont1') }}
          <b class="blackColor">{{ $t('rex.rexIntroductionCont11') }}</b>{{ $t('rex.rexIntroductionCont111') }}
        </p>
      </div>
      <div class="jianjie">
        <p>{{ $t('rex.rexIntroductionCont2') }}
          <b class="blackColor">{{ $t('rex.rexIntroductionCont22') }}</b>{{ $t('rex.rexIntroductionCont222') }}
        </p>
      </div>
      <div class="jianjie">
        <p><span class="greenColor">{{ $t('rex.rexIntroductionCont3') }}</span>{{ $t('rex.rexIntroductionCont33') }}</p>
      </div>
      <div class="jianjie">
        <p><span class="redColor">{{ $t('rex.rexIntroductionCont4') }}</span>{{ $t('rex.rexIntroductionCont44') }}</p>
      </div>
      <div class="jianjie">
        <p>{{ $t('rex.rexIntroductionCont5') }}
          <b class="blackColor">{{ $t('rex.rexIntroductionCont55') }}</b>{{ $t('rex.rexIntroductionCont555') }}
        </p>
      </div>
      <div class="introduce">
        <a :href="handleRexHref()" target="_blank">{{ $t('rex.comprehensiveIntroduction') }}</a>
      </div>
    </div>
  </div>
</template>
<script>
// import Io from '@/utils/socket';
// import { EosModel } from '@/utils/eos/index';

export default {
  name: 'left',
  data() {
    return {
      language: '',
    }
  },
  components: {
  },
  props: {
  },
  watch: {
    '$store.state.app.language': function change(val) {
      this.language = val;
    }
  },
  created() {
  },
  mounted() {
    this.language = this.$store.state.app.language;
  },
  beforeDestroy() {
  },
  methods: {
    // REX 介绍
    handleRexHref() {
      const url = {
        'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360028013572-REX-%E7%BB%88%E6%9E%81%E6%8C%87%E5%8D%97',
        'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360028013572-REX%E7%B5%82%E6%A5%B5%E6%8C%87%E5%8D%97',
        en: 'https://newdex.zendesk.com/hc/en-us/articles/360028013572-REX-Instructions',
        ko: 'https://newdex.zendesk.com/hc/ko/articles/360028013572-REX-Instruction',
      }
      return url[this.language]
    },
    // 隐藏REX简介
    handleHideRexDetail() {
      localStorage.setItem('rexDetail', 1);
      this.$emit('listenRexDetail', false);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

.greenColor {
  color: $-btn-green;
}

.redColor {
  color: $-btn-red;
}

.rexLeft {
  font-size: 14px;

  .intro {
    i {
      cursor: pointer;
    }
  }
}

.btbox {
  height: 42px;
  padding: 0 11px;
}

.btboxbg {
  background: $-topcolorf7;
}

.overflowbox {
  height: calc(100% - 42px);
  overflow: auto;
}

.jianjie {
  padding: 8px 11px 8px 11px;
  line-height: 23px;
  .blackColor {
    color: #000;
  }
}

.introduce {
  padding: 0 0 10px 11px;

  a {
    // color: $-btn-skyblue;
  }
}

.theme-1B1D27 {
  .btboxbg {
    background: rgba(0, 0, 0, 0.2);
    color: $-main-color;
  }
  .jianjie {
    .blackColor {
      color: rgba(255, 255, 255, 0.8);
    }
  }
}
</style>
